"use client";

import { useState } from "react";
import {
  Book,
  Code,
  Cpu,
  FileText,
  Heart,
  Layout,
  LifeBuoy,
  Settings,
  Smartphone,
  Users,
  Workflow,
  ChevronRight,
  ExternalLink,
  Github,
  Mail,
  Server,
  Bot,
  Database,
  Brain,
} from "lucide-react";
import Link from "next/link";

// 文档分类和内容
const docs = [
  {
    title: "项目概览",
    icon: Book,
    items: [
      { title: "项目简介", href: "#introduction" },
      { title: "系统架构", href: "#architecture" },
      { title: "技术选型", href: "#tech-stack" },
    ],
  },
  {
    title: "前端项目",
    icon: Layout,
    items: [
      { title: "核心功能", href: "#web-features" },
      { title: "页面说明", href: "#web-pages" },
      { title: "项目结构", href: "#web-structure" },
      { title: "开发指南", href: "#web-guide" },
    ],
  },
  {
    title: "后端项目",
    icon: Server,
    items: [
      { title: "API 服务", href: "#api-service" },
      { title: "数据模型", href: "#data-models" },
      { title: "接口文档", href: "#api-docs" },
      { title: "部署说明", href: "#api-deploy" },
    ],
  },
  {
    title: "AI 服务",
    icon: Bot,
    items: [
      { title: "AI 功能", href: "#ai-features" },
      { title: "模型说明", href: "#ai-models" },
      { title: "配置指南", href: "#ai-config" },
      { title: "部署说明", href: "#ai-deploy" },
    ],
  },
];

export default function DocsPage() {
  const [activeSection, setActiveSection] = useState("introduction");

  return (
    <div className="container mx-auto py-16 px-4">
      {/* 页面标题 */}
      <div className="text-center mb-12">
        <div className="flex justify-center mb-4">
          <div className="bg-primary/10 p-4 rounded-full">
            <FileText className="w-12 h-12 text-primary" />
          </div>
        </div>
        <h1 className="text-4xl font-bold mb-4">项目文档</h1>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          全面了解心身同调·全维健康项目的架构、功能和使用方法
        </p>
      </div>

      <div className="flex flex-col lg:flex-row gap-8 max-w-7xl mx-auto">
        {/* 侧边导航 */}
        <aside className="lg:w-64 flex-shrink-0">
          <nav className="space-y-8 sticky top-24">
            {docs.map((section) => (
              <div key={section.title}>
                <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground mb-2">
                  <section.icon className="w-4 h-4" />
                  {section.title}
                </div>
                <ul className="space-y-1">
                  {section.items.map((item) => (
                    <li key={item.href}>
                      <a
                        href={item.href}
                        className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors ${
                          activeSection === item.href.slice(1)
                            ? "bg-primary/10 text-primary font-medium"
                            : "hover:bg-muted"
                        }`}
                        onClick={() => setActiveSection(item.href.slice(1))}
                      >
                        <ChevronRight className="w-3 h-3" />
                        {item.title}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </nav>
        </aside>

        {/* 主要内容 */}
        <main className="flex-1 prose prose-slate dark:prose-invert max-w-none">
          {/* 项目概览 */}
          <section id="introduction" className="mb-16">
            <h2 className="flex items-center gap-3">
              <Book className="w-8 h-8 text-primary" />
              项目简介
            </h2>
            <p>
              心身同调·全维健康是一个创新的健康管理平台，旨在为用户提供全方位的健康数据管理和可视化服务。
              通过整合多种健康数据源，结合 AI
              分析，帮助用户更好地了解和管理自己的健康状况。
            </p>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 not-prose mt-8">
              <div className="bg-card rounded-xl p-6">
                <Heart className="w-6 h-6 text-primary mb-4" />
                <h3 className="font-semibold mb-2">健康管理</h3>
                <p className="text-sm text-muted-foreground">
                  全面的健康数据记录和分析，包括体重、血压、心率等指标的追踪。
                </p>
              </div>
              <div className="bg-card rounded-xl p-6">
                <Bot className="w-6 h-6 text-primary mb-4" />
                <h3 className="font-semibold mb-2">AI 分析</h3>
                <p className="text-sm text-muted-foreground">
                  智能分析健康数据，提供个性化建议和预警。
                </p>
              </div>
              <div className="bg-card rounded-xl p-6">
                <Database className="w-6 h-6 text-primary mb-4" />
                <h3 className="font-semibold mb-2">数据同步</h3>
                <p className="text-sm text-muted-foreground">
                  支持多设备数据同步，实现健康数据的无缝整合。
                </p>
              </div>
            </div>
          </section>

          {/* 系统架构 */}
          <section id="architecture" className="mb-16">
            <h2 className="flex items-center gap-3">
              <Workflow className="w-8 h-8 text-primary" />
              系统架构
            </h2>
            <div className="bg-card rounded-xl p-6 mb-6">
              <h3 className="font-semibold mb-4">三层架构设计</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 not-prose">
                <div className="space-y-2">
                  <h4 className="font-medium flex items-center gap-2">
                    <Layout className="w-4 h-4 text-primary" />
                    前端层
                  </h4>
                  <p className="text-sm text-muted-foreground">
                    Next.js + React + TypeScript 构建的现代化 Web 应用
                  </p>
                </div>
                <div className="space-y-2">
                  <h4 className="font-medium flex items-center gap-2">
                    <Server className="w-4 h-4 text-primary" />
                    后端层
                  </h4>
                  <p className="text-sm text-muted-foreground">
                    Hono.js + MongoDB 提供高性能 API 服务
                  </p>
                </div>
                <div className="space-y-2">
                  <h4 className="font-medium flex items-center gap-2">
                    <Bot className="w-4 h-4 text-primary" />
                    AI 层
                  </h4>
                  <p className="text-sm text-muted-foreground">
                    Flask + LLaMA/ChatGPT 提供智能分析服务
                  </p>
                </div>
              </div>
            </div>
          </section>

          {/* 技术栈 */}
          <section id="tech-stack" className="mb-16">
            <h2 className="flex items-center gap-3">
              <Code className="w-8 h-8 text-primary" />
              技术栈
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 not-prose">
              <div className="bg-card rounded-xl p-6">
                <h3 className="font-semibold mb-4">前端技术</h3>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-primary" />
                    Next.js 14
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-primary" />
                    TypeScript
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-primary" />
                    Tailwind CSS
                  </li>
                </ul>
              </div>
              <div className="bg-card rounded-xl p-6">
                <h3 className="font-semibold mb-4">后端技术</h3>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-primary" />
                    Hono.js
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-primary" />
                    MongoDB
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-primary" />
                    Bun Runtime
                  </li>
                </ul>
              </div>
              <div className="bg-card rounded-xl p-6">
                <h3 className="font-semibold mb-4">AI 技术</h3>
                <ul className="space-y-2 text-sm">
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-primary" />
                    Flask
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-primary" />
                    LLaMA/ChatGPT
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="w-2 h-2 rounded-full bg-primary" />
                    Python
                  </li>
                </ul>
              </div>
            </div>
          </section>

          {/* 前端功能 */}
          <section id="web-features" className="mb-16">
            <h2 className="flex items-center gap-3">
              <Layout className="w-8 h-8 text-primary" />
              前端功能
            </h2>
            <div className="space-y-6">
              <div className="bg-card rounded-xl p-6">
                <h3 className="font-semibold mb-4">核心功能</h3>
                <ul className="space-y-4">
                  <li className="flex items-start gap-3">
                    <Heart className="w-5 h-5 text-primary mt-1" />
                    <div>
                      <h4 className="font-medium">健康数据管理</h4>
                      <p className="text-sm text-muted-foreground">
                        体重、血压、心率等健康指标记录和可视化
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <Bot className="w-5 h-5 text-primary mt-1" />
                    <div>
                      <h4 className="font-medium">AI 智能分析</h4>
                      <p className="text-sm text-muted-foreground">
                        健康数据分析和个性化建议
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <Users className="w-5 h-5 text-primary mt-1" />
                    <div>
                      <h4 className="font-medium">用户系统</h4>
                      <p className="text-sm text-muted-foreground">
                        用户认证、个人资料管理
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </section>

          {/* 页面说明 */}
          <section id="web-pages" className="mb-16">
            <h2 className="flex items-center gap-3">
              <Layout className="w-8 h-8 text-primary" />
              页面说明
            </h2>
            <div className="space-y-6">
              <div className="bg-card rounded-xl p-6">
                <h3 className="font-semibold mb-4">主要页面</h3>
                <ul className="space-y-4">
                  <li className="flex items-start gap-3">
                    <div className="w-2 h-2 rounded-full bg-primary mt-2" />
                    <div>
                      <h4 className="font-medium">健康数据 (/health)</h4>
                      <p className="text-sm text-muted-foreground">
                        记录和可视化体重、血压、心率等健康指标，支持数据趋势分析
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-2 h-2 rounded-full bg-primary mt-2" />
                    <div>
                      <h4 className="font-medium">心情记录 (/mood)</h4>
                      <p className="text-sm text-muted-foreground">
                        记录每日心情变化，查看情绪趋势，获取 AI 建议
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <div className="w-2 h-2 rounded-full bg-primary mt-2" />
                    <div>
                      <h4 className="font-medium">心路笔记 (/memo)</h4>
                      <p className="text-sm text-muted-foreground">
                        记录生活点滴，获取 AI 智能建议，追踪心理健康
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </section>

          {/* API 服务 */}
          <section id="api-service" className="mb-16">
            <h2 className="flex items-center gap-3">
              <Server className="w-8 h-8 text-primary" />
              API 服务
            </h2>
            <div className="space-y-6">
              <div className="bg-card rounded-xl p-6">
                <h3 className="font-semibold mb-4">主要接口</h3>
                <div className="space-y-4">
                  <div>
                    <h4 className="font-medium mb-2">认证相关</h4>
                    <ul className="space-y-2 text-sm text-muted-foreground">
                      <li>POST /api/auth/register - 用户注册</li>
                      <li>POST /api/auth/login - 用户登录</li>
                      <li>GET /api/auth/me - 获取当前用户信息</li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-medium mb-2">健康数据</h4>
                    <ul className="space-y-2 text-sm text-muted-foreground">
                      <li>GET /api/health/records - 获取健康记录</li>
                      <li>POST /api/health/records - 创建健康记录</li>
                      <li>GET /api/health/stats/trends - 获取健康趋势</li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-medium mb-2">心情记录</h4>
                    <ul className="space-y-2 text-sm text-muted-foreground">
                      <li>GET /api/mood - 获取心情记录</li>
                      <li>POST /api/mood - 创建心情记录</li>
                      <li>GET /api/mood/stats - 获取心情统计</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* AI 功能 */}
          <section id="ai-features" className="mb-16">
            <h2 className="flex items-center gap-3">
              <Bot className="w-8 h-8 text-primary" />
              AI 功能
            </h2>
            <div className="space-y-6">
              <div className="bg-card rounded-xl p-6">
                <h3 className="font-semibold mb-4">智能分析</h3>
                <ul className="space-y-4">
                  <li className="flex items-start gap-3">
                    <Heart className="w-5 h-5 text-primary mt-1" />
                    <div>
                      <h4 className="font-medium">健康数据分析</h4>
                      <p className="text-sm text-muted-foreground">
                        分析健康指标趋势，提供个性化的健康建议和预警
                      </p>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <Brain className="w-5 h-5 text-primary mt-1" />
                    <div>
                      <h4 className="font-medium">心理健康分析</h4>
                      <p className="text-sm text-muted-foreground">
                        分析情绪变化，提供心理调节建议和支持
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <div className="bg-card rounded-xl p-6">
                <h3 className="font-semibold mb-4">模型支持</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <h4 className="font-medium">LLaMA 模型</h4>
                    <p className="text-sm text-muted-foreground">
                      本地部署的 LLaMA 模型，提供快速响应和隐私保护
                    </p>
                  </div>
                  <div className="space-y-2">
                    <h4 className="font-medium">ChatGPT</h4>
                    <p className="text-sm text-muted-foreground">
                      OpenAI 的 GPT-4 模型，提供高质量的分析和建议
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* 部署说明 */}
          <section id="api-deploy" className="mb-16">
            <h2 className="flex items-center gap-3">
              <Settings className="w-8 h-8 text-primary" />
              部署说明
            </h2>
            <div className="space-y-6">
              <div className="bg-card rounded-xl p-6">
                <h3 className="font-semibold mb-4">环境要求</h3>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  <li>Node.js {">="} 18</li>
                  <li>Python {">="} 3.8</li>
                  <li>MongoDB {">="} 5.0</li>
                  <li>Bun {">="} 1.0.0 (推荐)</li>
                </ul>
              </div>
              <div className="bg-card rounded-xl p-6">
                <h3 className="font-semibold mb-4">快速部署</h3>
                <div className="space-y-4">
                  <div>
                    <h4 className="font-medium mb-2">1. 克隆项目</h4>
                    <pre className="bg-muted p-3 rounded-lg text-sm overflow-x-auto">
                      <code>
                        git clone
                        https://gitee.com/zeroicey/life-sync-health-web.git
                      </code>
                    </pre>
                  </div>
                  <div>
                    <h4 className="font-medium mb-2">2. 安装依赖</h4>
                    <pre className="bg-muted p-3 rounded-lg text-sm overflow-x-auto">
                      <code>bun install</code>
                    </pre>
                  </div>
                  <div>
                    <h4 className="font-medium mb-2">3. 启动服务</h4>
                    <pre className="bg-muted p-3 rounded-lg text-sm overflow-x-auto">
                      <code>bun run dev</code>
                    </pre>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* 联系我们 */}
          <section id="contact" className="not-prose">
            <div className="bg-gradient-to-r from-primary/10 to-primary/5 rounded-xl p-8">
              <h2 className="text-2xl font-bold mb-4">需要帮助？</h2>
              <p className="text-muted-foreground mb-6">
                如果您在使用过程中遇到任何问题，或有任何建议，欢迎联系我们
              </p>
              <div className="flex flex-wrap gap-4">
                <Link
                  href="https://gitee.com/zeroicey"
                  target="_blank"
                  className="inline-flex items-center gap-2 bg-background px-4 py-2 rounded-lg hover:bg-muted transition-colors"
                >
                  <Github className="w-4 h-4" />
                  <span>Gitee</span>
                  <ExternalLink className="w-3 h-3" />
                </Link>
                <Link
                  href="mailto:zeroicey.hp@outlook.com"
                  className="inline-flex items-center gap-2 bg-background px-4 py-2 rounded-lg hover:bg-muted transition-colors"
                >
                  <Mail className="w-4 h-4" />
                  <span>Email</span>
                  <ExternalLink className="w-3 h-3" />
                </Link>
              </div>
            </div>
          </section>
        </main>
      </div>
    </div>
  );
}
